<template>
	<view>
		<view class="title">
			<view class="msg">
				早上好！张三先生
			</view>
			<view class="hint">
				<image src="../../static/lingdang.png" mode="">
					<view class="msg">
						<span>77</span>
					</view>
				</image>
			</view>
		</view>
		<view class="swiper-box">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="autoplay" :interval="interval"
					:duration="duration" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#78BD00">
					<swiper-item>
						<image src="../../static/label3.png" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/1701047494926.png" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/1701327974520.png" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="function">
			<view class="function-list">
				<image src="../../static/h5/owo/img/adai/E4BCA4E5BF83.gif" mode=""></image>
				<text>功能1</text>
			</view>
			<view class="function-list">
				<image src="../../static/h5/owo/img/adai/E58692E6B197.gif" mode=""></image>
				<text>功能2</text>
			</view>
			<view class="function-list">
				<image src="../../static/h5/owo/img/adai/E59083E6838A.gif" mode=""></image>
				<text>功能3</text>
			</view>
			<view class="function-list">
				<image src="../../static/h5/owo/img/adai/E5A4B1E890BD.gif" mode=""></image>
				<text>功能4</text>
			</view>
			<view class="function-list">
				<image src="../../static/h5/owo/img/adai/E684A4E68092.gif" mode=""></image>
				<text>功能5</text>
			</view>
		</view>
		<view class="tbody">
			<view class="click" @click="popup('功能A')">
				<view class="img">
					<image src="../../static/app-plus/owo/img/paopao/E985B7_2x.png" mode=""></image>
				</view>
				<text>功能A</text>
			</view>
			<view class="click" @click="popup('功能B')">
				<view class="img">
					<image src="../../static/h5/owo/img/paopao/E585A5E79CA0_2x.png" mode=""></image>
				</view>
				<text>功能B</text>
			</view>
			<view class="click" @click="popup('功能C')">
				<view class="img">
					<image src="../../static/h5/owo/img/paopao/E58DA7E6A7BD_2x.png" mode=""></image>
				</view>
				<text>功能C</text>
			</view>
			<view class="click" @click="popup('功能D')">
				<view class="img">
					<image src="../../static/h5/owo/img/paopao/E59090E8888C_2x.png" mode=""></image>
				</view>
				<text>功能D</text>
			</view>
			<view class="click" @click="popup('功能E')">
				<view class="img">
					<image src="../../static/h5/owo/img/paopao/E58DA7E6A7BD_2x.png" mode=""></image>
				</view>
				<text>功能E</text>
			</view>
			<view class="click" @click="popup('功能F')">
				<view class="img">
					<image src="../../static/h5/owo/img/paopao/E58F91E78EB0_2x.png" mode=""></image>
				</view>
				<text>功能F</text>
			</view>
			<view class="click" @click="popup('功能G')">
				<view class="img">
					<image src="../../static/h5/owo/img/paopao/E58F91E9A399_2x.png" mode=""></image>
				</view>
				<text>功能G</text>
			</view>
			<view class="click" @click="popup('功能H')">
				<view class="img">
					<image src="../../static/h5/owo/img/paopao/E593A6E8B181_2x.png" mode=""></image>
				</view>
				<text>功能H</text>
			</view>
		</view>
		<view class="tabbar"  :class="$store.state.AppStyle">
			<view class="tabbar-operate-bg" :class="isPost?'show':''" @tap="isPost=false"></view>
			<view class="tabbar-operate" :class="isPost?'show':''" >
			
			</view>
			<block  v-for="(item, index) in list" 
				    :key="index">
				<view class="tabbar-item" @tap="tabbarChange(item.type,index)">
				    <image class="item-img" :src="item.icon_a+'.png'" v-if="curType == item.type"></image>
				    <image class="item-img" :src="item.icon" v-else></image>
				    <view class="item-name" :class="{'tabbarActive': curType == item.type}" v-if="item.text">{{item.text}}</view>
				</view>
				<view class="tabbar-item addPost" v-if="index==1" @tap="isPost=!isPost" :class="isPost?'postShow':''">
					<view class="addPost-main">
						<view class="addPost-i">
							 <text class="cuIcon-add"></text>
						</view>
					</view>
					<view class="common">
						常用
					</view>
				</view>
			</block>
		</view>
		<my-popup ref="myPopup"></my-popup>
	</view>
	
</template>

<script>
import MyPopup from './pop.vue'
export default {
	components: {
	   MyPopup 
	},
    data() {
        return {
			isPost:false,
			showPopup: true,
            list: [{
                    text: '工作',  
                    icon: '/static/tabbar/home.png',  //未选中图标
                    icon_a: '/static/tabbar/home_cur',  //选中图片
                    type: "home",
                },{
                    text: '助手',
                    icon: '/static/tabbar/find.png',
                    icon_a: '/static/tabbar/find_cur',
					type: "find",
                }
                ,{
                    text: '分析',
                    icon: '/static/tabbar/square.png',
                    icon_a: '/static/tabbar/square_cur',
                    type: 'square',
                },{
                    text: '我的',
                    icon: '/static/tabbar/user.png',
                    icon_a: '/static/tabbar/user_cur',
                    type: "user",
                },
            ],
			curType:"home",
			curStyle:"blue",
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
        };
    },
    methods: {
		popup(name) {
			  this.$refs.myPopup.open(name)
		},
		
    }
};
</script>

<style>
.title {
	background-color: #272A3B;
	display: flex;
	color: #78BD00;
	line-height: 120upx;
	font-size: 30upx;
}
.msg {
	width: 100%;
	text-align: center;
}
.hint {
	width: 65upx;
	height: 65upx;
	position: absolute;
	right: 20upx;
	top: 10upx;
}
.hint .msg {
	color: #fff;
	position: absolute;
	top: -5upx;
	left: 30upx;
	background-color: red;
	width: 36upx;
	height: 36upx;
	border-radius: 50%;
}
.hint .msg span {
	position: absolute;
	top: -120%;
	left: 6upx;
	font-size: 22upx;
}
image {
	width: 100%;
	height: 100%;
}
.uni-swiper-slides uni-swiper-item {
	padding: 0;
}
.swiper {
	height: 300rpx;
}
/deep/ uni-swiper .uni-swiper-dot {
	border: 3upx solid #78BD00 ;
}
.function {
	width: 100%;
	height: 120upx;
	background-color: #272A3B;
	display: flex;
	justify-content: space-around;
}
.function-list {
	width: 55upx;
	height: 50upx;
	margin-top: 20upx;
	color: #9A9899;
	font-size: 20upx;
	text-align: center;
}
.tbody {
  margin-top: 20upx;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.click {
  width: calc(25% - 1px);
  height: 240upx;
  color: #9A9899;
  font-size: 26upx;
  text-align: center;
  margin-bottom: 1px;
  background-color: #fff;
}
.click .img {
	margin-top: 20upx;
	height: 150upx;
	width: 150upx;
	margin-left: 50%;
	transform: translate(-50%);
}

</style>
